<template>
  <div class="home">
    <div class="daneirong">
      <!-- 我的个人信息 -->
      <div class="">
        <div>
          <!-- 设置 -->
          <div class="shezhi">
            <van-popover
              v-model="showPopover"
              trigger="click"
              :actions="actions"
              placement="left-start"
              @select="onSelect"
            >
              <template #reference>
                <van-button type="primary" class="aaa">
                  <van-icon name="more-o" />
                </van-button>
              </template>
            </van-popover>
          </div>
          <!-- 头像 -->
          <div>
            <van-image
              round
              width="30vw"
              height="30vw"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </div>
          <!-- 信息 -->
          <div>
            {{
              $store.state.userdata.nickname
                ? $store.state.userdata.nickname
                : "昵称"
            }}
          </div>
          <div>({{ $store.state.userdata.username }})</div>
        </div>
        <!-- 内容 -->
        <div class="gerxxnr">
          <van-button class="btn1" type="primary" @click="shouhuodizhi"
            >收货地址</van-button
          >
          <van-button class="btn1" type="primary">收藏</van-button>
        </div>
      </div>
      <!-- 我的订单 -->
      <div class="bianju">
        <div class="ddshangban">
          <span>我的订单</span>
          <span @click="quanbudnaji">全部</span>
        </div>
        <van-grid :column-num="4">
          <van-grid-item
            v-for="(value, index) in wddd"
            :key="index"
            :icon="value.icon"
            :text="value.text"
            @click="dianji(value.statys)"
          />
        </van-grid>
      </div>
      <!-- 我的地址。。。 -->
      <div class="bianju">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(value, index) in xiaban"
            :key="index"
            :icon="value.icon"
            :text="value.text"
          />
        </van-grid>
      </div>
    </div>
    <NavBarVue></NavBarVue>
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";

export default {
  name: "My",
  data() {
    return {
      // 我的订单
      wddd: [
        {
          icon: "bill-o",
          text: "待支付",
          statys: "0",
        },
        {
          icon: "logistics",
          text: "待发货",
          statys: "1",
        },
        {
          icon: "completed",
          text: "待收货",
          statys: "2",
        },
        {
          icon: "failure",
          text: "已取消",
          statys: "3",
        },
      ],
      // 下半
      xiaban: [
        {
          icon: "location-o",
          text: "我的地址",
        },
        {
          icon: "service-o",
          text: "官方客服",
        },
        {
          icon: "peer-pay",
          text: "我的快递",
        },
      ],
      showPopover: false,
      actions: [{ text: "退出登录", icon: "setting-o" }],
    };
  },
  mounted() {
    let a = JSON.parse(localStorage.getItem("Userdata"));
    console.log("localStorage.getItem('Userdata'):", a);
    this.$http
      .post(
        "http://localhost:8080/user/info",
        { username: a.username },
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
          },
        }
      )
      .then((res) => {
        console.log(res.data);
        this.$store.state.userdata = res.data;
      });
  },
  methods: {
    shouhuodizhi() {
      this.$router.push({
        name: "address",
      });
    },
    // 我的订单
    async dianji(statys) {
      await this.$router
        .push({
          name: "wodedd",
          params: {
            name: "1",
          },
        })
        .then((res) => {
          this.$store.state.wddsstatys = statys;
        });
    },
    // 我的订单 全部
    quanbudnaji() {
      this.$router.push({
        name: "wodedd",
        params: {
          name: "quanbu",
        },
      });
    },
    onSelect(action){
     console.log(action.text);
     if (action.text=="退出登录") {
       localStorage.setItem('Authorization','')
       this.$router.push('/user/login').catch(r=>{
         console.log(r);
       })
     }
    }
  },
  components: {
    NavBarVue,
  },
};
</script>

<style scoped>
.bianju {
  margin: 40px 0;
  border: 1px solid rgba(131, 131, 131, 0.603);
  box-shadow: 1px 1px 5px rgba(97, 97, 97, 0.596);
  width: 94%;
}
.daneirong {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home {
  background-color: rgb(255, 255, 255);
}
.gerxxnr {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.gerxxnr > .btn1 {
  width: 100px;
}
.shezhi {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.ddshangban {
  width: calc(100% - 80px);
  height: 50px;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 40px;
}
.ddshangban > span {
  margin: 0;
  padding: 0;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.aaa {
  background-color: transparent;
  border: 1px solid transparent;
  color: #000;
  margin: 0;
  padding: 0;
  font-size: 30px;
}
</style>
